<template>
	<view class="page" :style="{width:width+'rpx'}">
		<view class="left">
			<view class="box">
				<image :src="iconComment" /> {{ comment }}
			</view>
			<view class="box" @tap.stop="handleLike">
				<image :src="is_like != 0 ? iconLiked : iconLike" /> {{ like }}
			</view>
			<view class="box" @tap.stop="handleCollect">
				<image :src="is_collect != 0 ? iconCollected : iconCollect" />
				{{ collect }}
			</view>
		</view>
		<view class="right" :style="{per:per+'%'}" v-if="isShare">
			<!--  #ifdef MP-WEIXIN -->
			<button class="box" open-type="share">
				<image :src="'/static/index/share.png'" />
				分享
			</button>
			<!-- #endif -->
			<!--  #ifdef APP-PLUS -->
			<button class="box" @tap.stop="shareClick">
				<image :src="'/static/index/share.png'" />
				分享
			</button>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	import {
		like,
		collect
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				iconComment: '/static/index/icon-comment.png',
				iconLike: '/static/index/icon-like1.png',
				iconLiked: '/static/index/icon-liked1.png',
				iconCollect: '/static/index/icon-collect1.png',
				iconCollected: '/static/index/icon-collected1.png',
				isclick: true
			};
		},
		props: {
			// 评论数
			comment: {
				type: Number,
				default: 0,
			},
			// 宽度
			width: {
				type: [String, Number],
				default: '440',
			},
			isShare: {
				type: Boolean,
				default: true,
			},
			per: {
				type: [String, Number],
				default: '26',
			},
			// 点赞数
			like: {
				type: Number,
				default: 0,
			},
			// 收藏数
			collect: {
				type: Number,
				default: 0,
			},
			// 是否点赞
			is_like: {
				type: [String, Number],
				default: 0,
			},
			// 是否收藏
			is_collect: {
				type: [String, Number],
				default: 0,
			},
			path: {
				type: String,
				default: "",
			},
			// 滚动位置ID
			posId: {
				type: String,
				default: "comment",
			},
			// 类型 1=汇资讯,2=学才艺,3=赶大集,4=享活动,5=读好书,6=订场馆,7=品非遗
			type: {
				type: [String, Number],
				default: 1,
			},
			is_id: {
				type: [String, Number],
				default: 0,
			},
		},
		methods: {
			// 分享
			shareClick() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					miniProgram: {
						id: '',
						path: '',
					},
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
				});

				// this.share = {
				// 	title: '',
				// 	path: `${this.path}?id=${this.is_id}`,
				// 	imageUrl: '',
				// 	desc: '',
				// 	content: ''
				// }
			},
			// 点赞
			handleLike() {
				if (this.isclick) {
					this.isclick = false
					let that = this
					like({
						id: that.is_id,
						operate: that.is_like == 0 ? 1 : 2,
						table: that.type
					}).then((res) => {
						if (res.code == 200) {
							that.$emit("like", that.is_id);
							setTimeout(() => {
								that.isclick = true;
							}, 1000)
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'none',
							})
							that.isclick = true
						}
					});
				}
			},

			// 收藏
			handleCollect() {
				if (this.isclick) {
					this.isclick = false
					let that = this
					collect({
						id: that.is_id,
						operate: that.is_collect == 0 ? 1 : 2,
						table: that.type
					}).then((res) => {
						if (res.code == 200) {
							that.$emit("like", that.is_id);
							setTimeout(() => {
								that.isclick = true;
							}, 1000)
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'none',
							})
							that.isclick = true
						}
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 50rpx;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;

		.left {

			margin-top: 10rpx;
			margin-right: 10rpx;
			width: 70%;
			display: flex;
			justify-content: space-between;
			color: #979797;

		}

		.right {
			height: 50rpx;

			button::after {
				border: none;
			}

			button {
				padding: 0 !important;
				background: #fff !important;
				font-size: 28rpx !important;
			}

			.button-hover {
				background: #fff;
			}

		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.box {
			margin-right: 10rpx;
			display: flex;
			align-items: center;
		}
	}
</style>